<template>
  <div>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8" v-for="item in content" :key="item.fromId">
            <h3>在线咨询</h3>
            <div style="background: #f2f2f2;height: 400px;overflow: auto;padding: 10px">
              <el-row>
                <h3>{{data}}</h3>
              </el-row>
              <div v-html="item.con"></div>
            </div>
            <div style="margin-top: 20px">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="messagePojo.msg">
              </el-input>
            </div>


            <el-button >关闭</el-button>
            <el-button type="success" @click="send(item.fromId)">发送</el-button>
          </el-col>

        </el-row>
      </el-main>
    </el-container>

  </div>
</template>
<script type="text/javascript">
    import informationApi from "@/api/information";
    import {mapGetters} from 'vuex'

    export default {
        name: "info",
        computed: {
            ...mapGetters([
                'name',
                'uid'
            ])

        },
        data() {
            return {
                center: {lng: 0, lat: 0},
                zoom: 3,
                pojo: {},
                agent: {},
                agents: [],
                activeIndex: '/oldHouse/info',
                centerDialogVisible: false,
                icon: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                messageAgent: {},
                messagePojo: {
                    toId: '',
                    msg: ''
                },
                websocket: null,
                data: '',
                content: [],
                fromIds:[]
            }
        },
        mounted() {
            console.log(this.$route.params.id)
            this.ready()
            if ('WebSocket' in window) {
                this.websocket = new WebSocket('ws://cyichen.mynatapp.cc/rent/ws/' + this.uid)
                this.initWebSocket()
            } else {
                alert('当前浏览器 Not support websocket')
            }
        },
        beforeDestroy() {
            this.onbeforeunload()
        },
        methods: {
            handler({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 15
            },
            ready() {

            },
            sendMessage(id) {
                informationApi.findById(id).then(response => {
                    this.messageAgent = response.data
                })
                this.content = ''
                this.centerDialogVisible = true


            },
            initWebSocket() {
                //连接错误
                this.websocket.onerror = this.setErrorMessage

                // //连接成功
                this.websocket.onopen = this.setOnopenMessage

                //收到消息的回调
                this.websocket.onmessage = this.setOnmessageMessage

                //连接关闭的回调
                this.websocket.onclose = this.setOncloseMessage

                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = this.onbeforeunload
            },
            setErrorMessage() {
                this.data = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
            },
            setOnopenMessage() {
                this.data = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
            },
            setOnmessageMessage(event) {
                //this.data = '服务端返回：' + event.data;
                var temp = JSON.parse(event.data)
                var contents = this.content;
                var flag = false
                if(contents.length>0) {
                    for(var i = 0;i<contents.length;i++){
                        if (temp.fromId === contents[i].fromId) {
                            contents[i].con+= "<el-row>\n" +
                                "            <span style=\"padding: 10px\">" + temp.fromId + "</span><br>\n" +
                                "            <span style=\"line-height: 30px;display: block;background: #fff;width: 45%;border-radius: 5px;margin: 10px;padding:5px\">" + temp.msg + "</span>\n" +
                                "          </el-row>"
                        }
                    }
                }else{
                    var msg = {
                        fromId: temp.fromId,
                        con: "<el-row>\n" +
                            "            <span style=\"padding: 10px\">" + temp.fromId + "</span><br>\n" +
                            "            <span style=\"line-height: 30px;display: block;background: #fff;width: 45%;border-radius: 5px;margin: 10px;padding:5px\">" + temp.msg + "</span>\n" +
                            "          </el-row>",
                    }
                    contents.push(msg)
                }

                /*this.fromIds.push(temp.fromId);
                this.content += "<el-row>\n" +
                    "            <span style=\"padding: 10px\">" + temp.fromId + "</span><br>\n" +
                    "            <span style=\"line-height: 30px;display: block;background: #fff;width: 45%;border-radius: 5px;margin: 10px;padding:5px\">" + temp.msg + "</span>\n" +
                    "          </el-row>"*/
            },
            setOncloseMessage() {
                this.data = "WebSocket连接关闭" + '   状态码：' + this.websocket.readyState;
            },
            onbeforeunload() {
                this.closeWebSocket();
            },

            //websocket发送消息
            send(toId) {
                this.messagePojo.toId = toId
                this.websocket.send(JSON.stringify(this.messagePojo))
                var contents = this.content;
                for(var i = 0;i<contents.length;i++){
                    if (toId === contents[i].fromId) {
                        contents[i].con+= "<div style='width: 100%;height: auto'><div style=\"text-align: right;line-height: 10px;margin: 10px\">\n" +
                            "            <div style=\"padding: 10px;\">" + this.uid + "</div>\n" +
                            "            <div style=\"line-height: 30px;background: #fff;margin-left:55%;width: 45%;border-radius: 5px;padding:5px\">" + this.messagePojo.msg + "</div>\n" +
                            "          </div></div>"
                    }
                }
                this.messagePojo.msg = ''

            },
            closeWebSocket() {
                this.websocket.close()
            }
        }


    }
</script>

<style scoped>
  span {
    color: #606266;
  }
</style>
